<template>
  <section class="center-main base-main">
    <!--头部-->
    <div class="header">
      <p class="fs16">
        <img src="https://ss0.baidu.com/73x1bjeh1BF3odCf/it/u=1001710114,1693776115&fm=85&s=2DC27A2378F38F84AE35D48E0100E091" alt="头像">
        用户昵称
        <span class="flr fs14">
          编辑资料
          <i class="iconfont icongengduox"></i>
        </span>
      </p>
    </div>
    <!--头部-->

    <!--我的订单-->
    <div class="my-order bgcFFF">
      <p class="fs15 line-bottom">我的订单 <span class="fs12 flr color7A7B82" @click="handleToOrderList">查看全部 <i class="iconfont icongengduox"></i></span></p>
      <div class="order-type">
        <ul class="text-c">
          <li @click="handleToOrderList(1)">
            <i class="pr iconfont icondaifukuanx">
              <sup class="pa">1</sup>
            </i>
            <span>待付款</span>
          </li>
          <li @click="handleToOrderList(2)">
            <i class="pr iconfont icondaifahuox">
              <sup class="pa sup-type-1">20</sup>
            </i>
            <span>待发货</span>
          </li>
          <li @click="handleToOrderList(3)">
            <i class="pr iconfont icondaishouhuox1">
              <sup class="pa sup-type-2">99+</sup>
            </i>
            <span>待收货</span>
          </li>
          <li @click="handleToOrderList(4)">
            <i class="pr iconfont icondaipingjiax">
              <sup class="pa">1</sup>
            </i>
            <span>待评价</span>
          </li>
          <li @click="toJumpPage('afterSaleList')">
            <i class="pr iconfont icontuikuanx">
              <sup class="pa">1</sup>
            </i>
            <span>售后/退款</span>
          </li>
        </ul>
      </div>
    </div>
    <!--我的订单-->

    <!--单元格-->
    <div class="cell-box mt10">
      <div class="cell-1 bgcFFF">
        <ul>
          <li class=" color7A7B82" @click="toJumpPage('couponList')">
            <i class="icon-left iconfont iconyouhuiquanx"></i>
            <span class="msg inline-block line-bottom fs15 color45454D">
              我的优惠券
              <span class="flr fs12 color7A7B82">
                4张
                <i class="iconfont icongengduox pr"></i>
              </span>
            </span>
          </li>
          <li @click="toJumpPage('enshrineList')">
            <i class="icon-left iconfont iconwodeshoucangx"></i>
            <span class="msg inline-block line-bottom fs15 color45454D">
              我的收藏
              <span class="flr fs12 color7A7B82">
                <i class="iconfont icongengduox pr"></i>
              </span>
            </span>
          </li>
          <li @click="toJumpPage('addressList')">
            <i class="icon-left iconfont iconwodeshouhuodizhix"></i>
            <span class="msg inline-block line-bottom fs15 color45454D">
              我的收货地址
              <span class="flr fs12 color7A7B82">
                <i class="iconfont icongengduox pr"></i>
              </span>
            </span>
          </li>
          <li>
            <i class="icon-left iconfont iconwodejifenx"></i>
            <span class="msg inline-block fs15 color45454D">
              我的积分
              <span class="flr fs12 color7A7B82">
                648
                <i class="iconfont icongengduox pr"></i>
              </span>
            </span>
          </li>
        </ul>
      </div>

      <div class="cell-2 bgcFFF mt10">
        <ul>
          <li @click="toJumpPage('problemFeedback')">
            <i class="icon-left iconfont iconwentifankuix"></i>
            <span class="msg inline-block line-bottom fs15 color45454D">
              问题反馈
              <span class="flr fs12 color7A7B82">
                <i class="iconfont icongengduox pr"></i>
              </span>
            </span>
          </li>
          <li>
            <i class="icon-left iconfont iconguanyuSOFOx"></i>
            <span class="msg inline-block fs15 color45454D">
              关于SOFO
              <span class="flr fs12 color7A7B82">
                <i class="iconfont icongengduox pr"></i>
              </span>
            </span>
          </li>
        </ul>
      </div>

    </div>
    <!--单元格-->

    <!--其它模块入口-->
    <div class="other-module bgcFFF pdlr15 mt10">
      <ul>
        <li>
          <i class="iconfont iconmeiriqiandaox"></i>
          <span class="fs13">
            每日签到
          </span>
        </li>
        <li @click="toJumpPage('integralExchange')">
          <i class="iconfont iconjifenhuanlix"></i>
          <span class="fs13">
            积分换大礼
          </span>
        </li>
        <li>
          <i class="iconfont icondajiangbizhongx"></i>
          <span class="fs13">
            大奖必中
          </span>
        </li>
        <li>
          <i class="iconfont icontuijianyoulix"></i>
          <span class="fs13">
            推荐有礼
          </span>
        </li>
        <li>
          <i class="iconfont iconpindanzhuanqux"></i>
          <span class="fs13">
            拼单专区
          </span>
        </li>
        <li @click="toJumpPage('filialPiety')">
          <i class="iconfont iconxiaoxinchuandix"></i>
          <span class="fs13">
            孝心传递
          </span>
        </li>
        <li>
          <i class="iconfont iconwoyaotouzix"></i>
          <span class="fs13">
            我要投资
          </span>
        </li>
        <li>
          <i class="iconfont iconjiaruxiaoshouyuanx"></i>
          <span class="fs13">
            加入销售
          </span>
        </li>
      </ul>
    </div>
    <!--其它模块入口-->
    <Tabbar  @tabberSelected="tabberSelected" :activeNum="active"></Tabbar>
    <Loading :show="isLoading"></Loading>
  </section>
</template>

<script type="text/ecmascript-6">
  import Tabbar from '../../components/Tabbar.vue'
  import { tabChange } from '../../assets/js/utils'
  import Loading from '../../components/Loading.vue'

  export default {
    components:{
      Tabbar,Loading
    },
    data(){
      return{
        active:4,
        isLoading:false,
      }
    },
    created(){
//      this.isLoading = true;
//      setTimeout(() => {
//        this.isLoading = false;
//      },1000)
    },
    methods:{
      tabberSelected(val){
        this.$router.push({
          path:tabChange(val),
        })
      },
      //跳转
      toJumpPage(name){
        this.$router.push({
          path:'/index/web/' + name,

        })
      },
      //跳转到订单列表页
      handleToOrderList(index){
        let active = index ? index : 0

        this.$router.push({
          name:'orderList',
          params:{
            active:active
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "../../assets/css/center-old";
</style>
